<template>
	<view>
		<scroll-view scroll-x="true" class="row">
			<view class="scroll">
				<view v-for="(item,index) in tabData" :key="item.id">
					<text @tap="checkName(item.title,index)"
						:class="[item.title == check ? 'active' : '']">{{item.title}}</text>
				</view>
			</view>
		</scroll-view>
		<Nva></Nva>
		<Main></Main>
		<!-- <swiper class="swiper" :current="indexCurrent">
			<swiper-item @touchmove="stopTouchMove" mark="1">
				<view class="swiper-item">
					
				</view>
			</swiper-item>
			<swiper-item>
				<view class="swiper-item">2</view>
			</swiper-item>
		</swiper> -->
	</view>
</template>

<script>
	import Nva from './nav.vue'
	import Main from './main.vue'
	export default {
		data() {
			return {
				tabData: [{
						id: 1,
						title: '推荐'
					},
					{
						id: 2,
						title: '免费体验'
					},
					{
						id: 3,
						title: '小白入门'
					},
					{
						id: 4,
						title: '快手菜'
					},
					{
						id: 5,
						title: '家常菜'
					},
					{
						id: 6,
						title: '面食'
					},
					{
						id: 7,
						title: '川湘菜'
					},
					{
						id: 8,
						title: '凉菜'
					},
				],
				check: '推荐',
				indexCurrent: 0
			}
		},
		components: {
			Nva,
			Main
		},
		methods: {
			sizeChange(e) {
			},
			checkName(name, index) {
				this.check = name,
					this.indexCurrent = index;
			},
			stopTouchMove(e) {
				if (e.mark == 1) {
					console.log(e)
					return true
				} else {
					return false;
				}
			}

		}
	}
</script>

<style scoped>
	.row {

		background-image: linear-gradient(90deg, rgb(238, 123, 45) 0%, rgb(246, 145, 28))
	}

	.scroll {
		display: flex;
		padding-left: 32rpx;
		height: 88rpx;
		line-height: 88rpx;
		border-top: 1px solid #F1F1F1;

		color: #FFFFFF;
	}

	.scroll>view {
		margin-right: 88rpx;
	}

	text {
		width: 160rpx;
		display: inline-block;
		text-align: center;
		font-size: 12px;
	}

	.tab {
		height: 200rpx;
		position: relative;
	}

	.active {
		font-size: 50rpx;
		font-weight: bold;
	}

	.swiper {
		height: 147vh;
	}
</style>
